//
//  ContentView.swift
//  BeautifulSwiftUI
//
//  Created by 移云 on 2020/7/24.
//  Copyright © 2020 MaoYeYeDeJiangCuCha. All rights reserved.
//

import SwiftUI

struct ContentView: View {
    
    @State var show:Bool = false
    @State var viewState = CGSize.zero
    @State var showCard:Bool = false
    @State var bottemViewState = CGSize.zero
    @State var showFull:Bool = false
    
    var body: some View {
        ZStack {
            
            TitleView()
                .blur(radius: show ? 20 : 0)
                .opacity(showCard ? 0.4 : 1)
                .offset(y: showCard ? -200 : 0)
                .animation(Animation.default.delay(0.1))
            
            BackgroundCardView()
                .frame(width: showCard ? 300 : 340, height: 220)
                .background(Color("card4"))
                .cornerRadius(20)
                .shadow(radius: 20)
                .offset(x: 0, y: show ? -400 : -40)
                .offset(x: viewState.width, y: viewState.height)
                .offset(y:showCard ? -180 : 0)
                .scaleEffect(showCard ? 1 : 0.9)
                .rotationEffect(.degrees(show ? 0 : 10))
                .rotationEffect(Angle.degrees(showCard ? -10 : 0))
                .rotation3DEffect(.degrees(showCard ? 0 : 10), axis: (x: 10, y: 0 , z: 0))
                .blendMode(.hardLight)//混合模式
                .animation(.easeInOut(duration: 0.5))
            

            BackgroundCardView()
                .frame(width: 340, height: 220)
                .background(Color("card3"))
                .cornerRadius(20)
                .shadow(radius: 20)
                .offset(x: 0, y: show ? -200 : -20)
                .offset(x: viewState.width, y: viewState.height)
                .offset(y:showCard ? -140 : 0)
                .scaleEffect(showCard ? 1 : 0.95)
                .rotationEffect(.degrees(show ? 0 : 5))
                .rotationEffect(Angle.degrees(showCard ? -5 : 0))
                .rotation3DEffect(.degrees(showCard ? 0 : 5), axis: (x: 10, y: 0 , z: 0))
                .blendMode(.hardLight)//混合模式
                .animation(.easeInOut(duration: 0.3))
            
            CardView()
                .frame(width: showCard ? UIScreen.main.bounds.width : 340, height: 220)
                .background(Color.black)
//                .cornerRadius(20)
                //平滑角
                .clipShape(RoundedRectangle(cornerRadius:showCard ? 30 : 20, style: .continuous))
                .shadow(radius: 20)
                .offset(x: viewState.width, y: viewState.height)
                .offset(y: showCard ? -100 : 0)
                .animation(.spring(response: 0.3, dampingFraction: 0.6, blendDuration: 0))
                .onTapGesture {
                    self.showCard.toggle()
            }
            .gesture(
                DragGesture()
                    .onChanged({ (value) in
                        self.viewState = value.translation
                        self.show = true
                    })
                    .onEnded({ (value) in
                        self.viewState = .zero
                        self.show = false
                    })
            )
            
            BottomCardView(show: $showCard)
                .offset(x: 0, y: showCard ? 360 : 1000)
                .offset(y:bottemViewState.height)
                .blur(radius: show ? 20 : 0)
                //时序曲线 cubic-bezier.com
                .animation(.timingCurve(0.2, 0.8, 0.2, 1, duration: 0.8))
                .gesture(
                    DragGesture()
                        .onChanged({ (value) in
                            self.bottemViewState = value.translation
                            if self.showFull {
                                 self.bottemViewState.height += -300
                            }
                            if self.bottemViewState.height < -300 {
                                self.bottemViewState.height = -300
                            }
                        })
                        .onEnded({ (value) in
                            if self.bottemViewState.height > 50 {
                                self.showCard = false
                            }
                            if self.bottemViewState.height < -100 {
                                self.bottemViewState.height = -300
                                self.showFull = true
                            }else{
                                self.bottemViewState = .zero
                                self.showFull = false
                            }
                        })
                )
            
            
        }
        
    }
}

struct ContentView_Previews: PreviewProvider {
    static var previews: some View {

        Group {
            ContentView()
            
            ContentView().previewDevice("iPhone 11 pro")
            
            ContentView().previewDevice("iPhone 8")
            
            ContentView().previewDevice("iPhone 8 Plus")
        }
    }
}

struct CardView: View {
    var body: some View {
        VStack {
            HStack{
                VStack(alignment: .leading) {
                    Text("UI Design")
                        .font(.title)
                        .fontWeight(.semibold)
                        .foregroundColor(Color.white)
                    Text("Certificate")
                        .foregroundColor(Color("accent"))
                }
                Spacer()
                Image("Logo1")
            }
            .padding()
            Spacer()
            Image("Card1")
                .resizable()
                .aspectRatio(contentMode: .fill)
                .frame(width: 300, height: 110, alignment: .top)
        }
        
    }
}

struct BackgroundCardView: View {
    var body: some View {
        VStack{
            Spacer()
        }
    }
}

struct TitleView: View {
    var body: some View {
        VStack {
            HStack {
                Text("Certificates")
                    .font(.largeTitle)
                    .fontWeight(.bold)
                Spacer()
            }
            .padding()
            Image("Background1")
            Spacer()
        }
    }
}

struct BottomCardView: View {
    
    @Binding var show:Bool
    var body: some View {
        VStack( spacing: 20){
            Rectangle()
                .frame(width:40,height:5)
                .cornerRadius(3)
                .opacity(0.1)
            
            Text("This certificate is proof that Meng To has achieved the UI Design course with approval from a Design+Code instructor.")
                .multilineTextAlignment(.center)
                .font(.subheadline)
                .lineSpacing(4)//行间距
            
            HStack(spacing:20) {
                RingView(color1: #colorLiteral(red: 0.2392156869, green: 0.6745098233, blue: 0.9686274529, alpha: 1), color2: #colorLiteral(red: 0.2196078449, green: 0.007843137719, blue: 0.8549019694, alpha: 1), widthAndHeight: 88, precent: 78, show: $show)
                    .animation(Animation.easeInOut.delay(0.3))
                
                VStack(alignment: .leading, spacing: 8) {
                    Text("SwiftUI").fontWeight(.bold)
                    Text("12 for 12 sections complete\n10 hours spent so far")
                        .font(.footnote)
                        .foregroundColor(.gray)
                        .lineSpacing(4)
                }
                .padding(20)
                .background(Color.white)
                .cornerRadius(20)
                .shadow(color: Color.black.opacity(0.3), radius: 20, x: 0, y: 10)
            }
            
            Spacer()
            
        }
        .padding(.top,8)
        .padding(.horizontal,20)
        .frame(width:UIScreen.main.bounds.width)
        .background(Color.white)
        .cornerRadius(30)
        .shadow(radius: 20)

    }
}
